<template>
    <div>
        <div class="wxb-upload-video">
            <!-- action必选参数, 上传的地址 -->
            <el-upload class="avatar-uploader el-upload--text" :action="getaction()" :data="getParam()"
                :show-file-list="false" :on-success="handleVideoSuccess" :before-upload="beforeUploadVideo"
                :on-progress="uploadVideoProcess">
                <video v-if="value != '' && videoFlag == false" :style="{ width: w, height: h, lineHeight: h }" :src="value"
                    class="avatar" controls="controls">您的浏览器不支持视频播放
                </video>
                <i v-else-if="value == '' && videoFlag == false" :style="{ width: w, height: h, lineHeight: h }"
                    class="el-icon-video-play avatar-uploader-icon"></i>
                <el-progress v-if="videoFlag == true" type="circle" :percentage="videoUploadPercent"></el-progress>
            </el-upload>
            <i class="el-icon-error close" @click.stop="clearLink"></i>
        </div>
    </div>

</template>

<script>

export default {
    name: "VideoUpload",
    components: {},
    props: {
        w: { default: '100px' },
        h: { default: '100px' },
        value: { type: String },
    },
    data() {
        return {
            showPhoto: false,
            videoForm: {
                videoUploadId: 0,
                Video: '',
            },
            videoUploadPercent: 0,
            videoFlag: false,
        }
    },
    methods: {
        beforeUploadVideo(file) {
            const isLt10M = file.size / 1024 / 1024 < 10;
            if (['video/mp4'].indexOf(file.type) == -1) {
                this.$message.warning('请上传正确的视频格式');
                return false;
            }
            if (!isLt10M) {
                this.$message.warning('上传视频大小不能超过10MB哦!');
                return false;
            }
        },
        uploadVideoProcess(event, file) {
            this.videoFlag = true;
            // this.videoUploadPercent = file.percentage.toFixed(0);
        },
        handleVideoSuccess(res) {                               //获取上传图片地址
            this.videoFlag = false;
            this.videoUploadPercent = 0;
            if (res.code == 200) {
                this.$emit("input", res.data.video_url);
            } else {
                this.$message.warning('视频上传失败，请重新上传！');
            }
        },
        getaction() {
            return process.env.VUE_APP_BASE_API + "/index.php?s=/union/upload/videoUpload";
        },
        clearLink() {
            this.$emit("input", "");
        },
        getParam() {
            return {
                store_token: this.$store.getters.token,
                category_id: this.add_all_category_id,
            }

        },
    },

}
</script>

<style lang="scss" scoped>
.wxb-upload-video {
    background-color: #fbfdff;
    border: 1px dashed #c0ccda;
    border-radius: 6px;
    box-sizing: border-box;
    cursor: pointer;
    font-size: 20px;
    vertical-align: middle;
    text-align: center;
    position: relative;
    float: left;
    margin-top: 10px;

    .el-icon-error {
        position: absolute;
        top: -10px;
        right: -10px;
        color: var(--main-color);
        display: none;
    }

    &:hover {
        .el-icon-error {
            display: block;
        }

        .avatar-uploader-icon {
            color: var(--main-color);
        }

        border: 1px dashed var(--main-color);
    }

    .avatar-uploader .el-upload {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }

    .avatar-uploader .el-upload:hover {
        border-color: #409EFF;
    }

    .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 178px;
        height: 178px;
        line-height: 178px;
        text-align: center;
    }

    .avatar {
        width: 178px;
        height: 178px;
        display: block;
    }
}
</style>
